<template>
	<view class="sort">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="bg"></view>
		<h3>{{$t('sort.shebei.title')}}</h3>
		<!-- 设备 -->
		<template v-if="shebei.length">
			<view class="content" v-for="(item, index) in shebei" :key="index">
				<text class="name">{{item.name}}</text>
				<view class="itemMain">
					<view class="item" v-for="(el, i) in item.child" :key="i" @click="next(el)">
						<view class="image">
							<image :src="$url.HOST + el.image" mode="aspectFill"></image>
						</view>
						<text>{{el.name}}</text>
					</view>
				</view>
			</view>
		</template>
		<u-empty v-else marginTop="100" mode="list" icon="http://cdn.uviewui.com/uview/empty/history.png"></u-empty>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				shebei: []
			}
		},
		onShow() {
			this.getDate()
		},
		methods: {
			next(val) {
				uni.navigateTo({
					url: '/pages/sort-FIL/sort-FIL?goods_class_id=' + val.id + '&name=' + val.name
				})
			},
			getDate() {
				this.$api.sendRequest({
					url: this.$url.GOOD_ITC,
					success: res => {
						console.log(res.data);
						this.shebei=res.data
					}
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	h3 {
		text-align: center;
	}
	image {
		width: 100%;
		height: 100%;
	}
	.bg {
		position: fixed;
		height: 360rpx;
		width: 100%;
		z-index: -1;
		background: linear-gradient(180deg, #DCEAFF 0%, rgba(255, 255, 255, 0) 100%);
	}
	.content {
		padding: 38rpx;
		padding-top: 26rpx;
		display: flex;
		flex-direction: column;
		.name {
			font-size: 30rpx;
			font-weight: bold;
			color: #000000;
			margin-bottom: 24rpx;
		}
		.itemMain {
			display: flex;
			flex-direction: row;
			.item:nth-child(2) {
				margin-left: 16rpx;
			}
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 48rpx 56rpx;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .06);
				border-radius: 14rpx;
				.image {
					width: 62rpx;
					height: 40rpx;
				}
				text {
					margin-top: 40rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #000000;
				}
			}
		}
	}
</style>
